import { Icon, Card } from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './InquireBox.less';

const { Description } = DescriptionList;

const description = (
  <DescriptionList className={styles.headerList} size="small" col="2">
    <Description term="学生姓名">婷宝</Description>
    <Description term="限用时间">2018-10-05</Description>
    <Description term="院系">机电学院</Description>
  </DescriptionList>
);

const breadcrumbList = [{
  title: '一级菜单',
  href: '/',
}, {
  title: '二级菜单',
  href: '/',
}, {
  title: '三级菜单',
}];

const tabList = [{
  key: 'rule',
  tab: '信息',
}, {
  key: 'detail',
  tab: '详情',
}];

function onTabChange(key) {
  console.log(key);
}

@connect(state => ({
  inquirebox: state.inquirebox,
}))

export default class InquireBox extends Component {
  render() {
    return (
      <div>
        <PageHeaderLayout
          style={{ marginBottom: 24 }}
          title="学号：2015224134"
          logo={<Icon type="rocket" style={{ fontSize: 26 }} />}
          content={description}
          breadcrumbList={breadcrumbList}
          tabList={tabList}
          onTabChange={onTabChange}
        >
          <Card title="书包柜信息" style={{ marginBottom: 24 }} bordered={false}>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="书包柜编号"> 1 </Description>
              <Description term="书包柜位置"> 二楼北区 </Description>
              <Description term="所有人"> 奥巴马 </Description>
            </DescriptionList>
          </Card>
        </PageHeaderLayout>
      </div>
    );
  }
}

